<template>
    <div>
        <p style="font-weight: 1000;color: #50bcc2;">配置内容:</p>
        <div class="set_info">
            <!-- <p>MQTT Client ID: <input>{{ info.mq_id }}</input></p> -->
            <p>MQTT Client ID: <el-input v-model="localInfo.mqtt_id" style="width: 240px" placeholder="Please input" /></p>
            <p>MQTT State: <el-input v-model="localInfo.mqtt_state" disabled style="width: 240px" placeholder="Please input" /></p>
            <p>MQTT IP: <el-input v-model="localInfo.mqtt_ip" style="width: 240px" placeholder="Please input" /></p>
            <p>MQTT Port: <el-input v-model.number="localInfo.mqtt_port" style="width: 240px" placeholder="Please input" /></p>
            <p>Server IP: <el-input v-model="localInfo.server_ip" style="width: 240px" placeholder="Please input" /></p>
            <p>Server Port: <el-input v-model.number="localInfo.server_port" style="width: 240px" placeholder="Please input" /></p>
        </div>
        <el-button size="small" type="primary" :disabled="localInfo.mqtt_state === true" @click="startMQHandle">连接MQTT</el-button>
        <el-button size="small" type="primary" :disabled="localInfo.mqtt_state === false" @click="stopMQHandle">断开MQTT</el-button>
        <el-button size="small" type="success" @click="saveMQSettingHandle">保存配置</el-button>
    </div>
</template>

<script lang="ts" setup>
import useStore from '@/store/index.js';
import { ElNotification} from 'element-plus'
import { computed } from 'vue';
import { startMQ, stopMQ, updateSetting } from "../api/api.js"

const store = useStore()


const refreshLocation = () =>{
    setTimeout(() => {
        window.location.reload();
    }, 2000); // 3000 毫秒 = 3 秒
}

const localInfo = computed(()=>{
    return store.info
})

const startMQHandle = () => {
    startMQ().then(function (response: any) {
        console.log(response);

        var result = response.result
        var msg = response.msg
        if (result === 1) {
            ElNotification({
                title: 'Success',
                message: msg,
                type: 'success',
            });
            refreshLocation();
        } else {
            ElNotification({
                title: 'Error',
                message: msg,
                type: 'error',
            })
        };
    })
    .catch(function (error) {
        ElNotification({
            title: 'Error',
            message: error,
            type: 'error',
        })
    })
}

const stopMQHandle = () => {
    stopMQ().then(function (response: any) {
        console.log(response);

        var result = response.result
        var msg = response.msg
        if (result === 1) {
            ElNotification({
                title: 'Success',
                message: msg,
                type: 'success',
            });
            refreshLocation();
        } else {
            ElNotification({
                title: 'Error',
                message: msg,
                type: 'error',
            })
        };
    })
    .catch(function (error) {
        ElNotification({
            title: 'Error',
            message: error,
            type: 'error',
        })
    })
}

const saveMQSettingHandle = () => {
    updateSetting(localInfo.value).then(function (response: any) {
        console.log(response);

        var result = response.result
        var msg = response.msg
        if (result === 1) {
            ElNotification({
                title: 'Success',
                message: msg,
                type: 'success',
            });
            refreshLocation();
        } else {
            ElNotification({
                title: 'Error',
                message: msg,
                type: 'error',
            })
        };
    })
    .catch(function (error) {
        ElNotification({
            title: 'Error',
            message: error,
            type: 'error',
        })
    })
}

</script>

<style>
.set_info p {
    font-size: 20px;
}

.set_info span {

    color: #d89b18;
}
</style>
